<template>
    <div class="header-view">
        <div class="item1">
            <div class="box1 center">
                <router-link v-if="userAvatar" to="/go"  class="logout-link" style="position: absolute;right: 200px;top: 14px;z-index: 10;">勇敢冒险</router-link>
                <!-- 头像区域 -->
                <div style="height: 50px;width: 200px; position: absolute;right: 200px; display: flex;align-items:center">
                    <router-link v-if="!userAvatar" to="/login" class="login-link">登录</router-link>
                    <img v-else :src="userAvatar" alt="用户头像" class="user-avatar"  @click="toUserInfo" style="
                    cursor: pointer;" title="个人中心"/>
                    <router-link v-if="userAvatar" to="/login" @click.prevent="logout" class="logout-link">退出登录</router-link>
                </div>
            </div>
        </div>
        <div class="item2">
            <div class="box2 center">
                <el-row :gutter="20" style="height: 100%;">
                    <el-col :span="4">
                        <div class="grid-content ep-bg-purple textcenter">
                            <img src="../assets/image/logo.png">
                        </div>
                    </el-col>
                    <el-col :span="4" class="active">
                        <router-link to="/" class="nav-link">
                            <div class="grid-content ep-bg-purple textcenter">
                                <p class="navtable">首页</p>
                                <p class="navtableEn">HOME</p>
                            </div>
                        </router-link>
                    </el-col>
                    <el-col :span="4" class="active">
                        <router-link to="/attractions" class="nav-link">
                            <div class="grid-content ep-bg-purple textcenter">
                                <p class="navtable">景点</p>
                                <p class="navtableEn">ATTRACTIONS</p>
                            </div>
                        </router-link>
                    </el-col>
                    <el-col :span="4" class="active">
                        <router-link to="/cuisines" class="nav-link">
                            <div class="grid-content ep-bg-purple textcenter">
                                <p class="navtable">美食</p>
                                <p class="navtableEn">CUISINES</p>
                            </div>
                        </router-link>
                    </el-col>
                    <el-col :span="4" class="active">
                        <router-link to="/communication" class="nav-link">
                            <div class="grid-content ep-bg-purple textcenter">
                                <p class="navtable">种草</p>
                                <p class="navtableEn">SHARING</p>
                            </div>
                        </router-link>
                    </el-col>

                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import Cookies from 'js-cookie';

export default {
    name: 'HeaderView',
    data() {
        return {
            userAvatar: null,  // 初始化头像
        };
    },
    mounted() {
        this.userAvatar = Cookies.get('userAvatar');  // 从 Cookie 中获取用户头像
    },
    computed: {
        ...mapState(['userAvatar'])  // 从 Vuex Store 中获取用户头像
    },
    methods: {
        logout() {
            Cookies.remove('userAvatar');  // 清空 Cookie 中的头像
            this.userAvatar = null;  // 清空本地头像数据
        },
        toUserInfo() {
            this.$router.push('/userinfo');
        }
    }
}
</script>

<style lang="scss" scoped>
.header-view {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.item1 {
    height: 50px;
    background-color: #B01F24;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 右对齐 */
    padding-right: 20px;
    /* 右侧内边距 */
}

.user-avatar {
    width: 40px;
    /* 头像宽度 */
    height: 40px;
    /* 头像高度 */
    border-radius: 50%;
    /* 圆形头像 */
}

.login-link {
    color: white;
    /* 登录链接颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    font-size: 16px;
    /* 字体大小 */
}

.logout-link {
    color: white;
    /* 退出链接颜色 */
    text-decoration: none;
    /* 去掉下划线 */
    font-size: 16px;
    /* 字体大小 */
    margin-left: 10px;
    /* 按钮与头像之间的间距 */
}

.item2 {
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: relative;
}

.center {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
}

.textcenter {
    text-align: center;
    padding: 10px 0;
}

.navtable {
    font-size: 14px;
    padding: 5px 0;
    color: #fff;
}

.navtableEn {
    font-size: 12px;
    color: #999;
    padding: 1px 0;
}

.active:hover {
    background: url(../assets/image/nav_hover.png) center no-repeat;
}

.nav-link {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* 移除之前的 nav a 相关样式 */
.nav a {
    display: none;
}

/* 确保链接内的文字样式与原来一致 */
.nav-link .navtable {
    font-size: 14px;
    padding: 5px 0;
    color: #fff;
}

.nav-link .navtableEn {
    font-size: 12px;
    color: #999;
    padding: 1px 0;
}

/* 保持悬停效果 */
.active:hover {
    background: url(../assets/image/nav_hover.png) center no-repeat;
}
</style>